<template>
  <el-row>
    <el-tooltip
      class="item"
      effect="dark"
      :content="showSearch ? '隐藏搜索' : '显示搜索'"
      placement="top"
    >
      <el-button
        
        circle
        icon="el-icon-search"
        @click="toggleSearch()"
      />
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="刷新" placement="top">
      <el-button
        
        style="margin-left: 10px"
        circle
        icon="el-icon-refresh"
        @click="refresh()"
      />
    </el-tooltip>
    <el-tooltip
      v-if="tableCol"
      class="item"
      effect="dark"
      content="显隐列"
      placement="top"
    >
      <el-dropdown trigger="click">
        <el-button
          style="margin-left: 10px"
          
          circle
          icon="el-icon-more"
        />
        <el-dropdown-menu slot="dropdown">
          <div style="padding: 10px">
            <div v-for="(item, index) in tableCol" :key="index">
              <el-checkbox v-model="item.show">{{ item.title }}</el-checkbox>
            </div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </el-tooltip>
  </el-row>
</template>
<script>
export default {
  name: "RightToolbar",
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
      showSearch: true,
    };
  },
  props: {
    tableCol: {
      type: Array,
      default: () => [],
    },
    CutShowSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
    },
  },
  computed: {
    device() {
      return this.$store.getters.device;
    },
  },
  watch: {
    tableCol(val) {
    },
    CutShowSearch(val) {
      this.showSearch = val;
    },
    showSearch(val) {
      this.$emit("update:showSearch", val);
    },
  },
  created() {
    // 显隐列初始默认隐藏列
    for (let item in this.tableCol) {
      if (this.tableCol[item].show === undefined) {
        this.$set(this.tableCol[item], "show", true);
      }
    }
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.showSearch = !this.showSearch;
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>
